<template>
<div class="container">
  <headers title="审核" :refresh="isRefresh" path="/publish_task"></headers>
  <nav class="bar bar-tab">
    <a class="tab-item" v-link="{path: '/look_img/' + taskId}">
      <span class="icon icon2 check-icon"></span>
      <span class="tab-label">查看合格图片</span>
    </a>
    <a class="tab-item" href="#">
      <span class="icon icon2 download-icon"></span>
      <span class="tab-label">下载合格图片</span>
    </a>
  </nav>
  <div class="content">
    <div class="list-block mar-top-0 mar-bottom-10">
      <ul>
        <li class="item-content">
          <div class="item-inner">
            <div class="item-title">投手ID</div>
            <div class="item-after">{{taskData.customerId}}</div>
          </div>
        </li>
        <li class="item-content">
          <div class="item-inner">
            <div class="item-title">任务类型名称</div>
            <div class="item-after">{{taskData.voteTypeName}}</div>
          </div>
        </li>
      </ul>
    </div>
    <div class="list-block mar-top-0 mar-bottom-10">
      <ul>
        <div class="row no-gutter">
          <div class="col-33">
            <span class="color-black">{{taskData.qualifiedCount}}</span><br/>
            <span class="color-black">合格</span>
          </div>
          <div class="col-33">
            <span class="color-black">{{taskData.unQualifiedCount}}</span><br/>
            <span class="color-black">不合格</span>
          </div>
          <div class="col-33">
            <span class="color-black">{{taskData.appealCount}}</span><br/>
            <span class="color-black">申诉中</span>
          </div>
        </div>
      </ul>
    </div>
    <div class="drag-container" id="dragger">
      <div class="drag-wrapper">
        <div class="btn-shenhe" v-if="taskCount > 0">
          <div class="btn-nopass" @click="shenhe(2)">不通过</div>
          <div class="btn-pass" @click="shenhe(1)">通过</div>
        </div>
        <div class="swiper-container">
          <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="img in taskData.imgUrl">
              <img :src="img">
            </div>
            <div class="swiper-slide" v-if="taskData.imgUrl == null">
              <img src="/static/img/no_img.png">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</template>

<script>
import $ from 'zepto'
import Headers from '../components/Headers'
import Swiper from '../assets/js/swiper.min.js'

export default {
  ready () {
    $.init()
    this.getAuditCustomerTask()
    this.findAppVoteTypes()
  },
  data () {
    return {
      taskData: {
        id: '',
        customerId: 0,
        taskId: 0,
        voteTypeId: '',
        voteTypeName: '-',
        qualifiedCount: 0,
        unQualifiedCount: 0,
        appealCount: 0,
        drag: null,
        swiper: null,
        imgUrl: null
      },
      taskDatas: [],
      taskCount: 0,
      voteTypes: [],
      taskId: this.$route.params.taskId,
      currIndex: 0,
      isRefresh: true
    }
  },
  methods: {
    getAuditCustomerTask () {
      this.$http.jsonp('http://www.mayishengcai.com/VoteManager/rest/auditCustomerTask/' + this.taskId)
      .then((data) => {
        if (data.data.length > 0) {
          this.$set('taskDatas', data.data)
          data.data[0].imgUrl = data.data[0].imgUrl ? data.data[0].imgUrl.split(',') : null
          data.data[0].voteTypeName = this.setVoteTypeName(data.data[0].voteTypeId)
          this.$set('taskData', data.data[0])
          this.taskCount = data.data.length
          setTimeout(() => {
            this.drag = this.dragRotate({
              targetId: 'dragger',
              dragCount: data.data.length,
              onDragChangeStart: (dragger) => {
                this.currIndex = dragger.currIndex
              }
            })
          }, 500)
        }
      }, (res) => {
        $.alert('网络异常')
      })
    },
    findAppVoteTypes () {
      this.$http.jsonp('http://www.mayishengcai.com/VoteManager/rest/findAppVoteTypes')
      .then((data) => {
        this.$set('voteTypes', data.data)
      }, (res) => {
        console.log('网络异常')
      })
    },
    setVoteTypeName (voteTypeId) {
      let voteTypeName = ''
      this.voteTypes.forEach((val, index) => {
        if (val.id === voteTypeId) {
          voteTypeName = val.name
        }
      })
      return voteTypeName
    },
    shenhe (status) {
      $.showIndicator()
      this.$http.jsonp('http://www.mayishengcai.com/VoteManager/rest/judgeCustomerTask', {
        params: {
          id: this.taskData.id,
          status: status
        }
      }).then((data) => {
        $.hideIndicator()
        if (data.data.success) {
          $.alert(data.data.message, () => {
            location.reload()
          })
        }
        else {
          $.alert(data.data.message)
        }
      }, () => {
        $.hideIndicator()
        $.alert('网络异常')
      })
    }
  },
  watch: {
    taskData: {
      handler: function (val, oldVal) {
        setTimeout(() => {
          if (this.swiper) {
            this.swiper.update()
          }
          else {
            this.swiper = new Swiper('.swiper-container', {
              effect: 'flip',
              direction: 'vertical'
            })
          }
        }, 500)
      },
      deep: true
    },
    currIndex: function (val, oldVal) {
      if (!(this.taskDatas[val].imgUrl instanceof Array)) {
        this.taskDatas[val].imgUrl = this.taskDatas[val].imgUrl ? this.taskDatas[val].imgUrl.split(',') : null
      }
      this.taskDatas[val].voteTypeName = this.setVoteTypeName(this.taskDatas[val].voteTypeId)
      this.taskData = this.taskDatas[val]
    }
  },
  components: {
    Headers
  }
}
</script>
<style scoped>
@import '../assets/css/swiper.min.css';
.check-icon {background-image: url("../assets/images/public/check.png");}
.download-icon {background-image: url("../assets/images/public/download.png");}

.drag-container{width:100%;-webkit-perspective:1500;-moz-perspective:1500;-ms-perspective:1500;perspective:1500;-ms-transform:perspective(1500px);-moz-transform:perspective(1500px);transform-style:preserve-3d;}
.drag-container .drag-wrapper{width:100%;transform-style:preserve-3d;backface-visibility:hidden;overflow:hidden;}

.row{text-align:center;}
.swiper-slide{width:100%;min-height:280px;padding:10px 15px}
.swiper-container{width:100%;min-height: 280px;max-height:380px;padding:0;margin:0;overflow:hidden;}
.swiper-wrapper img{width:100%;}

.btn-shenhe{position:absolute;width:100%;height:60px;top:50%;margin-top:-50px;z-index:999;}
.btn-nopass{width:60px;height:60px;line-height:60px;text-align:center;background-color:#eb605b;color:#FFF;font-size:14px;border-radius:0 30px 30px 0;float:left;}
.btn-pass{width:60px;height:60px;line-height:60px;text-align:center;background-color:#4cd964;color:#FFF;font-size:14px;border-radius:30px 0 0 30px;float:right;}

.row.no-gutter .col-33:first-child{
  border:none;
}
.row.no-gutter .col-33{
  padding: 15px;
  border-left:1px #e7e7e7 solid;
}
.list-block ul:before{
  height:0;
}
</style>